<template>
  <div class="edit-header">
    <p>广告活动竞价策略</p>
  </div>
  <a-radio-group :disabled="isDisabled" v-model="editSpCampaignInfo.bidStrategy" direction="vertical">
    <a-radio value="LEGACY_FOR_SALES">
      <p>动态竞价 - 仅降低</p>
      <p class="info">当您的广告不太可能带来销售时，我们将实时降低您的竞价。</p>
    </a-radio>
    <a-radio value="AUTO_FOR_SALES">
      <p>动态竞价 - 提高和降低</p>
      <p class="info">当您的广告很有可能带来销售时，我们将实时提高您的竞价（最高可达 100%），并在您的广告不太可能带来销售时降低您的竞价。</p>
    </a-radio>
    <a-radio value="MANUAL">
      <p>固定竞价</p>
      <p class="info">我们将使用您的确切竞价和您设置的任何手动调整，而不会根据售出可能性对您的竞价进行更改。</p>
    </a-radio>
  </a-radio-group>
  <div class="change-price-w flex">
    <div class="icon-w" @click="expaned = !expaned">
      <icon-right v-show="!expaned" />
      <icon-down v-show="expaned" />
    </div>
    <div>
      <p>根据广告位调整竞价（取代“竞价+”）</p>
      <p class="info" style="margin-bottom: 20px">除了竞价策略外，您可以将竞价最多提高 900%</p>
      <template v-if="expaned">
        <div class="flex-c" style="margin-bottom: 10px">
          <span class="label">搜索结果顶部(首页)：</span>
          <a-input-number :disabled="isDisabled" style="width: 100px" :precision="0" size="mini" v-model="editSpCampaignInfo.adjustmentAdsPlacementTopSearchPercentage" @blur="changePrice('adjustmentAdsPlacementTopSearchPercentage', 'price1')" placeholder="" :max="900" />
          <span style="margin-right: 20px">%</span>
          <p class="info">
            <span>示例：对于此广告位，</span>
            <span v-if="!demoPrices.price1">$1竞价将保持 $1 不变。</span>
            <span v-else>$1竞价将为 ${{ demoPrices.price1 }}。</span>
          </p>
        </div>
        <div class="flex-c">
          <span class="label">商品页面：</span>
          <a-input-number :disabled="isDisabled" style="width: 100px" :precision="0" size="mini" v-model="editSpCampaignInfo.adjustmentAdsPlacementProductDetailPercentage" @blur="changePrice('adjustmentAdsPlacementProductDetailPercentage', 'price2')" placeholder="" :max="900" />
          <span style="margin-right: 20px">%</span>
          <p class="info">
            <span>示例：对于此广告位，</span>
            <span v-if="!demoPrices.price2">$1竞价将保持 $1 不变。</span>
            <span v-else>$1竞价将为 ${{ demoPrices.price2 }}。</span>
          </p>
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue'
  import { DraftFinishStep } from '../../types'
  const props = defineProps({
    darftInfo: {
      type: Object,
      default: () => {},
    },
  })
  onMounted(() => {
    // 有草稿箱
    if (props.darftInfo?.draftId) {
      editSpCampaignInfo.value = props.darftInfo || {}
    }
  })
  const editSpCampaignInfo = ref<any>({
    bidStrategy: 'LEGACY_FOR_SALES',
  })
  // 根据当前流程节点判断是否可编辑
  let isDisabled = computed(() => {
    let handlerFlow = props.darftInfo?.handlerFlow || 'INIT'
    let level = DraftFinishStep[handlerFlow]
    return Number(level) > 0 ? true : false
  })
  const expaned = ref(false)
  const demoPrices = ref<any>({})
  // 编辑调整竞价
  function changePrice(valKey: string, key: string) {
    let val = editSpCampaignInfo.value[valKey]
    demoPrices.value[key] = val ? ((1 + val / 100) * 1).toFixed(2) : undefined
  }
  // 校验信息
  async function validateData() {
    return true
  }
  // 设置需要创建的数据
  function setCreateData() {
    return {
      bidStrategy: editSpCampaignInfo.value.bidStrategy,
      adjustmentAdsPlacementTopSearchPercentage: editSpCampaignInfo.value.adjustmentAdsPlacementTopSearchPercentage,
      adjustmentAdsPlacementProductDetailPercentage: editSpCampaignInfo.value.adjustmentAdsPlacementProductDetailPercentage,
    }
  }
  defineExpose({ validateData, setCreateData })
</script>
<style lang="less" scoped>
  .edit-header {
    background-color: var(--color-fill-2) !important;
    border-left: 2px solid rgb(var(--primary-6));
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  .arco-radio {
    line-height: 18px;
    margin-bottom: 20px;
  }
  .info {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
  }
  .change-price-w {
    padding-left: 5px;
    .icon-w {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .label {
      width: 140px;
      text-align: right;
    }
  }
</style>
